import base from "../base.js";
// 引用影厅接口
import theaters from "../../api/theaters"
// 创建默认数据对象
const theatersProps = [, {
    name: "所属影院",
    key: "cinemasId"
},{
        name: "放映厅",
        key: "theatersName"
    }, {
        name: "是否营业",
        key: "theatersStatus"
    }
]
export default class extends base {
    // 拿到列表页面传过来的id值
    constructor(propy) {
        super(propy)
        this.data = {
            theaters: {
                _id: propy._id
            },
            cinemas:[]
        }
    }
    
    //  渲染页面函数
    render() {
        this.$el.html(`
        <div style="margin-top:2px;">
                <a href="" style="font-size:16px;">放映厅管理</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                <a href="#/info/theaters" style="font-size:16px;">放映厅列表</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                <a href="" style="font-size:16px;">修改放映厅</a> 
            </div>
            <hr>
            <div>
               <h1 style="font-size:30px;width:600px;font-weight:bold;margin:30px auto 5px;padding-left:140px">修 改 放 映 厅<h1/> 
            </div>
            <div style="font-size:20px;width:600px;margin:20px auto">
                 <table style="width:600px;font-size:20px">
                    <tbody style="margin:auto;height:300px">
                         ${theatersProps.map(item => {
                                 if (item.key === "cinemasId") {
                                       return `
                                               <tr>
                                                    <td>
                                                     <span style="font-weight:bold;">${item.name}:</span>
                                                   </td>
                                                    <td > <select name="${item.key}" id="${item.key}" style="border:0px;outline:1px solid silver;width:286px;height:33px"></select>
                                                    </td>
                                                 </tr> `     
                                        } else if (item.key === "theatersStatus") {
                                         return `
                                               <tr>
                                                    <td>
                                                      <span style="font-weight:bold;">${item.name}:</span>
                                                     </td>
                                                    <td style">
                                                       <input name="${item.key}" type="radio" value=true checked>是
                                                        <input style="margin-left:48px"  name="${item.key}" type="radio" value=false>否
                                                    <td/>
                                                </tr>`
                                            } else {
                                                 return `<tr>
                                                    <td>
                                                        <span style="font-weight:bold;">${item.name}:</span>
                                                    </td>
                                                    <td>
                                                        <input style="padding:6px;width:273px;border:solid 1px silver;height:26px" name="${item.key}" type="text" value=${this.data.theaters[item.key]}>
                                                    </td> 
                                               </tr>`
                                               }
                                              }).join("")}
                            <tr>  
                                <td></td>
                                <td style=" padding-left: 14px;">
                                   <input type="button" class="layui-btn" id="addBtn" value="确认修改">  
                                   </td>
                                <td></td>
                            </tr>
                     </tbody>
                </table>
            </div>
        `)
        this.addBtnEle = $("#addBtn")
    }
    async changeTheatersInfo() {
        // 结构的方式拿到用户输入的影厅的数据
        const {
            _id,cinemasId,theatersName,theatersStatus
        } = this.data.theaters;
    
        // 发送请求将用户输入的数据添加到数据库，传入的参数是影院cinemasId，影厅名字theatersName，影厅是否营业theatersStatus
        const status= await theaters.changeTheaters({
            _id,cinemasId,theatersName,theatersStatus
        });
        status.ok? window.alert("修改成功") : window.alert("修改失败")
    }
    handle() {
        // 结构的方式拿到影厅的数据
        // 通过遍历的方式添加事件
        theatersProps.map(item=> {
            if (item.key === "_id"){
               
                return
            } else if(item.key ==="cinemasId"){
                // 下拉列表的value值变化的时候，将值同步到theaters信息中
                $(`select[name=${item.key }]`).on("change", e => {
                    this.data.theaters[item.key] = e.target.value;
                })
            }else if(item.key==="theatersStatus"){
                $(`input[name=${item.key}]`).on("focus", e => {
                    console.log(e.target.value);
                    this.data.theaters[item.key] = e.target.value;
                })
            }else{
                // 给用户输入框添加输入事件，触发事件时将用户输入的值添加到theaters信息中
                $(`input[name=${item.key }]`).on("input", e => {
                    this.data.theaters[item.key] = e.target.value;
                })
            }           
        })
        
        // this.uploadBtnEle.on("click",this.upload.bind(this))
        // 新增按钮的事件
        this.addBtnEle.on("click", this.changeTheatersInfo.bind(this));
    }
  async mounted() {
    //  拿到要修改的影厅id
      const {_id}=this.data.theaters
        // 获取影院数据
      this.data.cinemas= await theaters.getAllCinemas();
    //   获取到要修改影厅的所有数据
      this.data.theaters =await theaters.getOnetheaters({_id});
    // 重新渲染数据
    this.rerender()
    }
rerender(){
    $(`select[name="cinemasId"]`).html(`
        ${this.data.cinemas.map(item=>{
            return `<option value=${item._id}>${item.name}</option>`
        })}    
        `);
        theatersProps.map(item=>{
            // 根据该影厅对应的影院Id修改下拉列表的默认选中项
            if(item.key=="cinemasId")$(`select[name=${item.key}]`).val(this.data.theaters.cinemasId)
            if(item.key=="theatersStatus")$(`input[value=${this.data.theaters.theatersStatus}]`).attr("checked",true);
            // 将用户需要修改的数据自动填充到对应的输入框中
            if(item.key=="theatersName")$(`input[name=${item.key}]`).val(this.data.theaters[item.key])
        })

}
}